<template>
	<view class="pb120">
		
		<u-navbar title="详情" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		<view class="home">
			<view class="title">“你室友……”“你怎么知道我室友可好了！”</view>
			<view class="u-flex u-row-between">
				<view>08-19  重大青年</view>
				<!-- <view>
					<u-icon name="eye-fill" size="35" color="#2BC3C8" label="30 浏览" labelSize="24" class="u-m-r-30">
					</u-icon>
					<u-icon :name="showClick?'thumb-up-fill':'thumb-up'" size="32"
						:color="showClick?'#FF0000':'#2BC3C8' " label="30 点赞" labelSize="24" class="u-m-r-30"
						@click="click"></u-icon>
					<u-icon :name="showHeart ? 'heart-fill':'heart'" :color="showHeart?'#FF0000':'#2BC3C8'" label="收藏"
						labelSize="24" size="32" @click="heart"></u-icon>
				</view> -->
			</view>
			<view class="u-m-t-30">
				
				<u-parse :html="detail.content"></u-parse>
				
			
				<image src=""></image>
			</view>
		</view>
		<u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top" :icon="iconTop"
		 :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips">
		</u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				modeTop: 'circle',
				bottomTop: 200,
				rightTop: 40,
				top: 600,
				iconTop: 'arrow-up',
				iconStyleTop: {
					color: '#ffffff',
					fontSize: '30rpx'
				},
				customStyle: {
					backgroundColor: '#39CCCC',
					color: '#ffffff'
				},
				tips: '顶部',
		
				background: {
					'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
				},
				detail: {
					content:
				 `
				<div>
				<image src="/static/_abf4a4fd93e7809fce5fead27f7a4027_1695748468_20230820202245.gif"></image>
				<p>近日，各大高校即将开学准大学生们也将遇见新室友</p>
				<p>他们可能来自五湖四海</p>
				<p>语言饮食各有特色</p>
				<p>生活习惯稍有不同</p>
				<p>就让我们一起看看和大学室友的那些趣事儿吧</p>
				<p>我们不一样</p>
				<p>来自不同地区的室友带着极具地域特色的方言</p>
				<p>而这些表达习惯也让我们在磨合初期常常收获意料之外的回答</p>
				<image src="/static/tab/wangxiakan.jpg"></image>
				<p>我：“微辣可以吗？”</p>
				<p>室友：“中！”我：“中辣？”</p>
				<image src="/static/zhongla.jpg"></image>
				<p>室友：“喝米饭还是吃米粉？”</p>
				<p>我：“什么！米饭能喝？”</p>
				<image src="/static/fen.jpg"></image>
				<p>有的同学会担心当习惯用语改变</p>
				<p>口音也受到影响时</p>
				<p>自己的普通话怎么办</p>
				<p>其实不用担心</p>
				<p>口音只是生活表达习惯</p>
				<p>不妨碍大家用普通话交流</p>
				<p>在普通话水平测试时照样字正腔圆、抑扬顿挫</p>
				<image src="/static/putonghua.jpg"></image>
				<p>表达习惯、字音腔调上的相互影响</p>
				<p>让我们在沟通交流中</p>
				<p>多了许多乐趣</p>
				<p>而一日三餐中的口味差异</p>
				<p>也让我们连连惊叹</p>
				<p>“怎么和想象里的差这么多！”</p>
				<image src="/static/bujiandan.jpg"></image>
				<p>室友：“你吃爆辣怎么能面不改色？”</p>
				<p>我：“可能我生来就擅长吃辣。”</p>
				<image src="/static/chila.jpg"></image>
				<p>和有忌口的室友一起吃饭</p>
				<p>发现大家的蘸料五花八门</p>
				<p>调配方法各有特色</p>
				<p>有时能打开美食新世界</p>
				<image src="/static/chihuoguo.jpg"></image>
				<p>生活习惯各有不同的我们</p>
				<p>在刚开始的时候有点难为情</p>
				<p>室友：“走，去澡堂洗澡。”</p>
				<p>我：“真有点不好意思。”</p>
				<image src="/static/zaotang.jpg"></image>
				<p>我的神仙室友</p>
				<p>每到假期</p>
				<p>总能吃到从天南海北</p>
				<p>寄来的美食</p>
				<image src="/static/ji.jpg"></image>
				<p>开学时</p>
				<p>也能收到室友投喂的各种特产</p>
				<image src="/static/kaixue.jpg"></image>
				<p>在平常日子里</p>
				<p>室友的家人也会寄来很多应时的特产</p>
				<image src="/static/jiaren.jpg"></image>
				<p>出门旅游的室友</p>
				<p>吃到当地特色美食时</p>
				<p>也会记得顺手帮我们打包一份</p>
				<image src="/static/travel.jpg"></image>
				<p>*成为更好的我们</p>
				<p>我们不仅学到了</p>
				<p>对方家乡话的精髓</p>
				<p>开拓了许多美食新地图</p>
				<p>也会在学业中</p>
				<p>相互督促、一同进步</p>
				<p>信息共享——“在吗？比赛组队不？”</p>
				<p>互相监督——“走，去图书馆自习。”</p>
				<p>在自律、拼搏、进取的室友影响下</p>
				<p>我们耳濡目染，不断朝着优秀迈进</p>
				<image src="/static/kaoyan.jpg"></image>
				<p>打球、长跑、健身</p>
				<p>很幸运在突破自我时</p>
				<p>有你为我欢呼</p>
				<p>也很庆幸在体力不支时</p>
				<p>有你扶我休息</p>
				<p>在干净整洁的前提下</p>
				<p>更高品质的生活一束插花、一盆绿植</p>
				<p>让寝室的居住环境锦上添花</p>
				<image src="/static/hua.jpg"></image>
				<p>来自不同地方的室友</p>
				<p>在不同文化与习惯上</p>
				<p>难免有多多少少的冲突</p>
				<p>面对这些差异与矛盾时</p>
				<p>我们应该如何处理呢</p>
				<p>快跟随团团一起来学习一下吧~</p>
				<image src="/static/xiaobenben.jpg"></image>
				<p>*学会及时与室友交流</p>
				<p>人与人之间的相识相知都是从沟通交流开始的，所以，保持和舍友们经常交流，这样才能使你不被忽视，也不会让任何一个舍友被你忽略，如果相处出现了不愉快甚至是矛盾，就要及时和室友沟通，去解决，不然就会导致舍友关系疏远，矛盾更大化。
</p>
				<p>*平等沟通、自信做自己</p>
				<p>在日常生活中最憋屈的就是被人瞧不起和欺负，无论是谁都难以接受被这样对待，所以在寝室切勿有此类言行，这是处理好寝室关系的大前提，有平等的地位和看法是沟通交流的基础。</p>
				<p>*把握好“度”，让关系“铁”起来</p>
				<p>寝室生活，相互影响。如何寻求平衡，需要把握好“度”。如果彼此理解，把“度”把握好，友好相处的同时给对方留下空间，那么舍友间关系自然也会“铁”起来。</p>
				<p>大学生活即将开启</p>
				<p>在宿舍生活中</p>
				<p>我们或许有欢乐</p>
				<p>或许有争吵</p>
				<p>但无论怎样</p>
				<p>大学时光都是很短暂的</p>
				<p>相信大家</p>
				<p>都能和室友友好相处</p>
				<p>创造出一份</p>
				<p>独属于你们的美好回忆</p>
				<p>来源 | 学校共青团</p>
				<p>审核 | 郭宇</p>
				<p>责任编辑 | 张常熙 章雨欣</p>
				<p>校审 | 姚璐 包晗</p>
				<image src="/static/xinshidai.jpg"></image>
			
			
</div> 
							`
							  
				},
				showHeart: false,
				showClick: false,
				comment: ''
			}
			
		},
		onLoad() {

		},
		methods: {
			//收藏
			heart() {
				this.showHeart = !this.showHeart
			},
			click() {
				this.showClick = !this.showClick
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 38rpx;
		font-weight: 700;
		padding: 20rpx 0;
	}

	.comment {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1rpx solid #ededed;

		.input {
			background-color: #f7f7f7;
			padding: 20rpx 15rpx;
			font-size: 26rpx;
			border-radius: 12rpx;
			width: 480rpx;
		}

		.box {
			display: flex;
			padding: 15rpx 30rpx;
		}
	}

	.pb120 {
		padding-bottom: 120rpx;
	}
	
	.wrap{
		display: flex;
		flex-wrap: wrap;
		padding-left: 12rpx;
		
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 0 0 30%;
			text-align: center;
			border: 1rpx solid #ededed;
			height: 100rpx;
			width: 100rpx;
			margin: 10rpx;
		}
	}
	.toptem {
		padding: 20rpx 0;
	}
</style>
